<template>
	<!-- 有商品时 -->
	<view class="cart-container" v-if="cartItems.length > 0">
		<!-- 购物车商品列表的标题区域 -->
		<view class="cart-title">
			<!-- 左侧的图标 -->
			<uni-icons type="shop" size="18"></uni-icons>

			<!-- 描述文本 -->
			<text class="cart-title-text">购物车</text>
		</view>
		<!-- 地址信息 -->
		<my-address></my-address>
		<!-- 商品列表区域 -->
		<!-- block 空标签 / template  -->
		<uni-swipe-action ref="swipeAction">
			<block v-for="product in cartItems" :key="product.goods_id">
				<!-- 滑动swipe组件 -> 内层 -->
				<uni-swipe-action-item @click="swipeActionHandler(product)" :right-options="rightOptions">
					<view class="goods-item">
						<!-- 商品左侧图片区域 -->
						<view class="goods-item-left">
							<radio :checked="product.goods_state" @click="radioChange(product)" color="#C00000"></radio>
							<image :src="product.goods_small_logo || defaultImage" class="goods-pic"></image>
						</view>

						<!-- 商品右侧信息区域 -->
						<view class="goods-item-right">
							<!-- 商品标题 -->
							<view class="goods-name">{{ product.goods_name }}</view>
							<view class="goods-info-box">
								<!-- 商品价格 -->
								<view class="goods-price">￥{{ product.goods_price | formatNum }}</view>
								<!-- 商品数量 -->
								<uni-number-box @change="updateCount(product, $event)" :value="product.goods_count"
									:min="1"></uni-number-box>
							</view>
						</view>

					</view>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 商品结算 -->
		<my-checkout></my-checkout>
	</view>
	<!-- 没有商品 -->
	  <view class="empty-cart" v-else>
	    <text class="tip-text">空空如也~</text>
	  </view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import badge from '@/mixins/badge.js'
	import MyAddress from "@/components/my-address.vue";
	import MyCheckout from "@/components/my-checkout.vue";
	export default {
		mixins: [badge], 
		components: {
			MyAddress,
			MyCheckout
		},
		data() {
			return {
				defaultImage: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				rightOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
				}]
			}
		},
		computed: {
			...mapState("cart", ["cartItems"]),
		},
		created() {
			// console.log(this.$store.state.cart.cartItems);
			// console.log(this.cartItems);
		},
		methods: {
			radioChange(item) {
				this.$store.commit('cart/updateCartState', item)
			},
			swipeActionHandler(item) {
				uni.showModal({
					title: '温馨提示',
					content: '确认要删除该商品么?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$refs.swipeAction.closeAll()
							this.$store.commit('cart/removeCartItem', item)
						} else if (res.cancel) {
							console.log('用户点击取消');
							this.$refs.swipeAction.closeAll()
						}

					}
				});
			},
			updateCount(item, e) {
				// e: 商品的数量
				// item: 哪个商品
				console.log(item);
				console.log(e);
				this.$store.commit('cart/updateCartCount', {
					item,
					num: e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-container {
		padding-bottom: 100rpx;
	}
	.empty-cart {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding-top: 300rpx;
	
	  .tip-text {
	    font-size: 30rpx;
	    color: gray;
	    margin-top: 30rpx;
	  }
	}
	.cart-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding-left: 10rpx;
		border-bottom: 1rpx solid #efefef;

		.cart-title-text {
			margin-left: 20rpx;
		}
	}

	.goods-item {
		display: flex;
		padding: 20rpx 10rpx;
		border-bottom: 1rpx solid #f0f0f0;
		width: 750rpx;
		box-sizing: border-box;

		.goods-item-left {
			margin-right: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.goods-pic {
				width: 200rpx;
				height: 200rpx;
				display: block;
			}
		}

		.goods-item-right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			.goods-name {
				font-size: 26rpx;
			}

			.goods-info-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.goods-price {
				font-size: 32rpx;
				color: #c00000;
			}
		}
	}
</style>